<template>
  <el-dialog title="修改付款申请" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false"
    :modal-append-to-body="false" v-drag2anywhere>
    <div>
      <div class="title">采购单信息</div>
      <div style="overflow-y: auto; height: 200px; border:1px solid #e6e6e6;">
        <el-table :data="tableData" default-expand-all ref="filterTable" border empty-text="结果为空">
          <el-table-column type="expand" label="详情" width="50px" style="height: 100%;">
            <template v-slot="scope">
              <div style="margin-left: 50px;width: 900px;">
                <el-table border :data="scope.row.goods">
                  <el-table-column label="序号" type="index" width="50px" align="center"></el-table-column>
                  <el-table-column label="产品名称" prop="title"></el-table-column>
                  <el-table-column label="规格型号" prop="model"></el-table-column>
                  <el-table-column label="品牌" prop="brand" width="60px" align="center"></el-table-column>
                  <el-table-column label="单位" prop="unit" width="60px" align="center"></el-table-column>
                  <el-table-column label="数量" prop="count" width="60px" align="center"></el-table-column>
                  <el-table-column label="单价" prop="price" width="100px" align="center"></el-table-column>
                  <el-table-column label="小计" prop="total" width="100px" align="center"></el-table-column>
                  <el-table-column label="备注" prop="dmemo"></el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="采购单号" prop="reqcode" width="120px"></el-table-column>
          <el-table-column label="付款状态" align="center" width="70px">
            <template v-slot="scope">
              {{scope.row.paidstatus==0?'未付':(scope.row.paidstatus==1?"已付":"部分")}}
            </template>
          </el-table-column>
          <el-table-column label="收款单位名称" prop="seller" show-overflow-tooltip></el-table-column>
          <el-table-column label="付款方式" prop="paytype" width="90px" align="center"></el-table-column>
          <el-table-column label="采购途径" prop="buyroute" width="90px" align="center"></el-table-column>
          <el-table-column label="发票类型" align="center" width="120px" prop="tickettype"  show-overflow-tooltip></el-table-column>
          <el-table-column label="采购总额" prop="sum" width="100px" align="center"></el-table-column>
          <el-table-column label="运费" prop="yunfei" width="120px" align="center"></el-table-column>
          <el-table-column label="备注" prop="memo" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
    </div>

    <div style="margin-top: 20px;"></div>
    <el-row>
      <el-col :span="12">
        <div <div class="title">请款信息</div>
        <div>
          <table cellspacing="0" style="width:500px;border-spacing:0px; border-collapse:collapse;  border-color:#b5b5b5"
            border="1px">
            <tr>
              <td colspan="4" style="text-align: center;">
                <h3>请款单</h3>
              </td>
            </tr>
            <tr>
              <td style="width: 90px;text-align: center;height:25px;">申请时间</td>
              <td style="padding-left: 5px;">{{formData.createtime}}</td>
              <td style="width: 90px;text-align: center;">申请人</td>
              <td style="padding-left: 5px;">{{formData.requester}}</td>
            </tr>
            <tr>
              <td style="width: 90px;text-align: center;height:25px">收款单位</td>
              <td colspan="3" style="padding-left: 5px;color:#FF0000;font-weight: bold;font-size: 16px;">{{formData.seller}}</td>
            </tr>
            <tr>
              <td style="width: 90px;text-align: center;height:25px">开户银行</td>
              <td colspan="3" style="padding-left: 5px;">{{formData.bankname}}</td>
            </tr>
            <tr>
              <td style="width: 90px;text-align: center;height:25px">开户账号</td>
              <td colspan="3" style="padding-left: 5px;">{{formData.banknumber}}</td>
            </tr>
            <tr>
               <td style="width: 90px;text-align: center;">支付方式</td>
               <td style="padding-left: 5px;">
                <span>{{formData.paytype}}</span>
              </td>
              <td colspan="2" style="text-align: center;">
                  <img v-if="formData.paytype.indexOf('微信')!=-1" src="@/assets/images/weixin.png" style="width: 30px;"></img>
                  <img v-if="formData.paytype.indexOf('支付宝')!=-1" src="@/assets/images/alipay.png" style="width: 30px;"></img>
                  <img v-if="formData.paytype.indexOf('金采')!=-1" src="@/assets/images/jdjc.png" style="width: 30px;"></img>
                  <img v-if="formData.paytype.indexOf('现金')!=-1" src="@/assets/images/rmb.png" style="width: 30px;"></img>
                  <span v-if="formData.paytype.indexOf('诚意赊')!=-1" style="font-size: 20px; color: #FF0000;" >诚意赊</span>
              </td>

            </tr>
            <tr>
              <td style="width: 90px;text-align: center;height:25px">申请金额(元)</td>
              <td  colspan="3" style="font-size: 20px;color:#FF0000;padding-left: 5px;">{{parseFloat(formData.amount).toFixed(4)}}
              </td>
            </tr>
            <tr>
              <td style="width: 90px;text-align: center;">附加信息</td>
              <td colspan="3" style="padding-left: 5px;">
                <div>
                   <span>采购途径:</span><span>{{formData.buyroute}}</span>
                </div>
                <div>
                  <span>店铺名称:</span><span>{{formData.shopname}}</span>
                </div>
                <div>
                  <span>店铺链接:</span><span><a :href="formData.shopurl" target="_blank">{{formData.shopurl}}</a></span>
                </div>
              </td>
            </tr>
            <tr>
              <td style="width: 90px;text-align: center;">请款备注信息</td>
              <td colspan="3" style="padding-left: 5px;">{{formData.reqmemo}}</td>
            </tr>
            <tr>
              <td>采购附件</td>
            </tr>
          </table>
        </div>

      </el-col>
      <el-col :span="12">
        <el-form :model="formData" ref="form1" label-width="100px" size="mini" :rules="rules">
          <div class="title">付款信息</div>
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="付款单位:">
                <span style="font-weight: bold;font-size: 16px;">{{formData.buyer}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款状态:" prop="status">
                <el-select v-model="formData.paystatus" placeholder="请选择">
                  <el-option label="未支付" value="0"></el-option>
                  <el-option label="已支付" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款日期:" prop="paydate">
                <el-date-picker type="date" v-model="formData.paydate" value-format="yyyy-MM-dd" placeholder="付款日期"
                  style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="银行回单">
                <el-upload list-type="picture-card" ref="upload" :file-list="upconfig.imgList" :action="upconfig.action"
                  :headers="upconfig.headers" :accept="upconfig.accept" :limit="upconfig.limit"
                  :on-change="handleChange" :auto-upload="false" :on-remove="handleRemove" :on-exceed="handleLimit"
                  multiple :on-preview="handlePreview">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="支付备注:">
                <el-input v-model="formData.paymemo" type="textarea" :rows="5" placeholder="支付备注" style="width: 100%;"
                  clearable></el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </el-col>
    </el-row>

    <AttachViewerUI ref="attachUI" v-if="attachVisible"></AttachViewerUI>
    <div slot="footer">
      <el-button size="medium" v-if="formData.status==0" @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" size="medium" @click="handleSave">保存状态</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import AttachViewerUI from '@/components/attachviewer.vue'
  export default {
    components: {
      AttachViewerUI
    },
    data() {
      return {
        index: -1,
        formData: {
          id: -1,
          reqcode: '',
          type: '',
          amount: 0,
          status: '0',
          memo: '',
          paydate: '',
          paytype: '',
          paymemo: '',
        },
        upconfig: {
          //文件上传相关参数
          accept: '.jpg,.jpeg,.png,.pdf',
          limit: 5,
          headers: {
            token: localStorage.getItem('token') != null ? localStorage.getItem('token') : ''
          },
          imgList: [],
          fileList: [],
          rids: [], //要删除的id
          action: ""
        },
        tableData: [],
        dialogVisible: false,
        attachVisible: false,
        rules: {
          status: [{
            required: true,
            message: "请选择支付状态",
            trigger: 'change'
          }],
        }
      }
    },
    methods: {
      /***********************文件上传区域开始****************/
      //文件数量超限提示
      handleLimit: function() {
        this.$message.warning("最多可上传" + this.upconfig.limit + "个文件");
      },
      handleChange: function(file, list) {
        //判断文件格式和数量
        var ext = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
        var extarr = ['jpg', 'jpeg', 'png', "pdf"];
        var sizeok = file.size / 1024 / 1024 < 5;
        if (extarr.lastIndexOf(ext) == -1) {
          this.$message.error("上传文件格式必须为" + extarr.join(","));
          //删除刚上传的文件
          this.upconfig.fileList.splice(this.upconfig.fileList.length - 1, 1);
          return;
        }
        if (!sizeok) {
          this.$message.error("上传文件大小最大不超过5M");
          this.upconfig.fileList.splice(this.upconfig.fileList.length - 1, 1);
          return;
        }

        this.upconfig.fileList = list;
      },
      // 文件列表移除文件时的钩子
      handleRemove: function(file, fileList) {
        console.log(file);
        if (file.id) { //如果存储 id即为已经上传好的图片
          this.upconfig.rids.push(file.id);
        }
        this.upconfig.fileList = fileList;
      },
      handlePreview(file) {
        this.attachVisible = true;
        this.$nextTick(() => {
          this.$refs.attachUI.dialogVisible = true;
          this.$refs.attachUI.initData(JSON.parse(JSON.stringify(this.formData.attach)))
        })
      },

      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      init(index, data) {
        this.index = index;
        this.tableData = [data];
        data.paystatus = data.status;
        this.upconfig.imgList = data.attach;
        this.formData = JSON.parse(JSON.stringify(data));
      },
      handleSave() {
        if (this.formData.paystatus == 1 && this.formData.paydate == "") {
          this.$message.error({
            message: "【已支付】状态必须填写日期",
            duration: 1500,
            showClose: true
          });
          return;
        }
        this.$refs.form1.validate(ok => {
          if (ok) {
            var fd = new FormData();
            fd.append("id", this.formData.id);
            fd.append("buyid", this.formData.buyid);
            fd.append("status", this.formData.paystatus);
            fd.append("amount", this.formData.amount);
            fd.append("paymemo", this.formData.paymemo);
            fd.append("paydate", this.formData.paydate);
            fd.append("rids", this.upconfig.rids);
            //附件上传
            let fid = 0;
            this.upconfig.fileList.forEach(file => {
              if (file.raw) {
                fd.append("file" + fid, file.raw);
                fid++;
              }
            });

            this.$axiosUploader.post("api/admin/buypayment/update", fd).then(res => {
              if (res.status == 200 && res.data.code) {
                this.$message.success({
                  message: res.data.msg,
                  duration: 1500,
                  showClose: true
                });
                this.upconfig.rids = [];
                this.upconfig.imgList = res.data.attachlist;
                this.formData.attach = res.data.attachlist;
                this.dialogVisible = false;
                this.upconfig.fileList = [];
                this.$emit("updated", this.index, this.formData);
                this.$refs.upload.clearFiles();
              } else {
                this.$message.error({
                  message: res.data.msg,
                  duration: 1500,
                  showClose: true
                });
              }
            });
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
